<template>
  <div class="investor-management">
    <el-card class="card" shadow="hover">
      <template #header>
        <h3 class="title">投资商管理</h3>
      </template>

      <!-- 查询条件 -->
      <el-row :gutter="5" style="margin-bottom: 10px;">
        <el-col :span="18">
          <el-row :gutter="4">
            <el-col :span="4">
              <el-form-item label="投资商姓名">
                <el-input placeholder="投资商姓名" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="手机号">
                <el-input placeholder="手机号" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" style="text-align: right;">
          <el-button type="primary">查询</el-button>
          <el-button type="success" @click="add">新增</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="investors" style="width: 100%" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="name" label="投资商姓名" width="150"></el-table-column>
        <el-table-column prop="phoneNumber" label="手机号" width="150"></el-table-column>
        <el-table-column prop="isCustomer" label="是否客户" width="100">
          <template #default="{ row }">
            {{ row.isCustomer === 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="investmentType" label="投资类型" width="120"></el-table-column>
        <el-table-column prop="investmentAmount" label="出资金额" width="120"></el-table-column>
        <el-table-column prop="projects" label="投资项目">
          <template #default="{ row }">
            <span v-if="row.projects && row.projects.length">{{ row.projects.join(', ') }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="stationName" label="涉及电站">
          <template #default="{ row }">
            <span v-if="row.stationName && row.stationName.length">{{ row.stationName.join(', ') }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150" :resizable="false">
          <template #default="scope">
            <el-button size="mini"  @click="handleView(scope.row)">查看</el-button>
            <el-button size="mini"  @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-row>
        <el-col :span="24" style="text-align: center; margin-top: 20px;">
          <el-pagination
              background
              layout="prev, pager, next"
              :current-page="param.pageNum"
              :page-size="param.pageSize"
              :total="total"
              @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
      <Investors4Add  :dialog4add="dialog4add"  @aclose="addClose"/>
        <Investors4list :dialog4list="dialog4list" :formId="formId"  @close="handleClose"/>
      <Investors4Edit :dialog4Edit="dialog4Edit" :formId="formId" :photoPath="photoPath"  @eclose="editClose"/>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import {ElCard, ElTable, ElTableColumn, ElButton, ElMessage, ElMessageBox} from 'element-plus';
import axios from "axios";
import Investors4Add from "./Investors4Add.vue";
import Investors4list from "./Investors4list.vue";

import Investors4Edit from "./Investors4Edit.vue";

const handleDelete=(row=>{
  ElMessageBox.confirm('确认删除吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(()=>{
        axios.get(`/Investors/deleteById?invId=${row.id}`)
            .then(()=>{
              getAll()
            ElMessage.success("删除成功")
            })
            .catch(errorMsg=>{
              console.log(errorMsg)
              ElMessage.error(errorMsg.response.data)
            })
      })

})
const addClose=(()=>{
  dialog4add.value=false
  getAll()
})
const editClose=(()=>{
  dialog4Edit.value=false
  getAll()
})

const investors = ref([

  // 其他数据对象按照此格式添加
]);
const  handleClose=(visible=>{
  console.log(visible)
  dialog4list.value=visible

})
const dialog4Edit=ref(false)
const add=(()=>{
  dialog4add.value=true
})
const dialog4add=ref(false)
const getAll=(()=>{
  axios.post('/Investors/getAll',param.value)
      .then(resp=>{
        investors.value=resp.data.records
        total.value = resp.data.total; // 设置总记录数
      })
})
onMounted(() => {
  getAll()

});
const param = ref({
  pageNum: 1,
  pageSize: 8
});

const handleCurrentChange = (val) => {
  param.value.pageNum = val;
  getAll();
};
const photoPath=ref(null)
const handleEdit = (row) => {
  dialog4Edit.value=true
  formId.value=row.id
  photoPath.value=row.photoPath
  console.log(row)
};
const dialog4list=ref(false)
const formId=ref(null)
const handleView = (row) => {
  dialog4list.value=true
  formId.value=row.id
};

const handleSelectionChange = (selection) => {
  console.log('选择项变化:', selection);
};


const total = ref(0); // 总记录数


</script>

<style scoped>
:root {
  --primary-color: #409eff;
  --text-color: #2c3e50;
  --bg-color: #fff;
  --border-color: #ebeef5;
}

.investor-management {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  margin-top: 60px;
}

.card {
  max-width: 100%;
  margin: auto;
  background-color: var(--bg-color);
  border-color: var(--border-color);
}

.title {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
}

.el-table__row {
  transition: background-color 0.3s;
}

.el-table tr:nth-child(even) {
  background-color: #f9fafc;
}

.el-table tr:hover {
  background-color: #ecf5ff;
}

.el-button {
  margin-right: 5px;
  transition: all 0.3s;
}

.el-button:hover {
  transform: scale(1.05);
}

/* 确保表格内的文本不会溢出 */
.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 调整分页器样式 */
.el-pagination {
  padding: 2px 0;
}
</style>